<%@page import="org.quickbundle.tools.helper.RmJspHelper" %>
<%@page import="org.quickbundle.project.RmGlobalReference" %>
<%@page import="com.dfhc.util.CryptoHelper"%>
<%@page import="com.dfhc.ISystemConstant" %>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
                

<!DOCTYPE html>
<html lang="en">
	<head>
	
	<!-- 全局js 和css包 -->
	<%@ include file="/jsp/include/web/jqGrid/global.jsp" %>	
	<script src="<%=request.getContextPath()%>/js/rm-tools.js"></script>
	<script src="<%=request.getContextPath()%>/js/jqGrid/app-pub.js"></script>
	<meta charset="utf-8" />
	<title>自定义查询</title>

	<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />


</head>
<body>
 <!-- begin  右上角 -->
	   
   		<%@ include file="/jsp/include/web/jqGrid/rightTop.jsp"%> 
<form name="form" method="post">
<table class="mainTable" align="center">
	<tr>
		<td align="right">执行sql</td>
		<td align="right">(注意文件编码格式为utf-8,以免发生乱码)</td>
		<td>
		  <input type="file" id ="sqlFile" name="sqlFile">
		</td>
		<td align="right">&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	</table>


<table align="center">
	<tr>
		<td>
			<input type="button" class="button_ellipse" id="button_update" value="查询" onClick="javascript:execsql_onClick();">
		</td>
	</tr>
</table>



</form>
	
	
  <div class="ui-widget-overlay ui_out_tan" ></div>

	   <!-- begin  右上角 -->
	   
   		<%-- <%@ include file="/jsp/include/web/jqGrid/rightTop.jsp"%> --%>
	
		
	   <!-- end 右上角 -->

		

					<div class="page-content" >
					<div >
					   <!-- <form name="form" id="form" class="FormGrid ui_inner_form" method="post" >
					   
					           <div class="control-group">
												<div class="controls">
												<div class="input-prepend">
												  <span class="add-on">自定义sql查询</span><p><p>
												  <textarea class="medium m-wrap" style="width:300px;height:300px;" rows="50" cols="60" name="sql" id="sql" ></textarea>							  
												</div>
												
												</div>
								 </div>
					     
					     </form> -->
					     </div>
					     
					    <!--  <div class="EditTable operate_div" >
					       <a href="javascript:void(0)" id="sData" class="fm-button ui-state-default ui-corner-all fm-button-icon-left" onclick="javascript:searchsql();">
					       <i class="icon-search"></i>
					           查询</a>					       
					     </div> -->
					   
					     
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<table id="grid-table"></table>

								<div id="grid-pager"></div>

								<script type="text/javascript">
									var $path_base = "/";//this will be used in gritter alerts containing images
								</script>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->

<script type="text/javascript">
	function execsql_onClick(){  //直接点到修改页面
		var sqlFileName = $("#sqlFile").val();
		if(isStrEmpty(sqlFileName)){
			alert("请选择sql文件名!");
			return;
		}
		uploadFileTest('<%=request.getContextPath()%><%=CryptoHelper.encryptUrl(request,"/pubController/doQuerysqlpage")%>','sqlFile','<%=request.getContextPath()%><%=CryptoHelper.encryptUrl(request,"/pubController/customquery")%>')
	}	
</script>
		<script type="text/javascript">
	
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		var _table ;
		var sessionId = "<%=request.getSession().getId()%>";		
		
		
		//上传文件
		function uploadFileTest(url,fileElementId,successToUrl){debugger;
			$.ajaxFileUpload({
				url:url,
				secureuri:false,
				fileElementId:fileElementId,
				dataType:'json',
				success:function(result, status){
					 //异常判断与处理  
                    if (result.status=='0') {  
                        alert(result.message);  
                        return;  
                    }
                    
					searchsql();
				},
				error:function(xhr, s1, s2){
					var message = xhr.responseText;
					eval("var json = "+message);
					if($.trim(json.exception).length==0){
						 alert("数据异常,请刷新页面重试!");
					}else{
						alert(json.exception);
					}
				}
			});
		}
		
		//自定义查询			
		function searchsql(){
			
			// 列改变了，需要清空table
		    jQuery(grid_selector).empty();
		    //获取所有列名称
			$.ajax({  
		            type: "GET",  
		            url: getRootPath()+"<%=CryptoHelper.encryptUrl(request,"/pubController/getCustomqueryFieldNames")%>?jsguid="+sessionId,  
		            cache : false,  //禁用缓存  
		            data:$(form).serializeArray(),   
		            dataType: "json",  
		            success: function(result) {  
		                    //异常判断与处理  
		                    if (result.status=='0') {  
		                        alert(result.message);  
		                        return;  
		                    }
		                    var fieldsJson = result.columnNames;
		                    if(isStrEmpty(fieldsJson)){
		                       alert("没有数据!");
		                       return; 
							}
							//构造列名列表,列模型列表
							var columnsArray = [];
							var columnsModal=[];
							for(var p in fieldsJson){//遍历json数组时，这么写p为索引，0,1
							 var json = {name:null,index:null, width:90,editable: false,editoptions:{size:"20",maxLength:"200"}};
							 json.name = fieldsJson[p].data;
							 json.index = fieldsJson[p].data;
		 					 columnsArray.push(fieldsJson[p].data);
							 columnsModal.push(json); 					  					  
							}
							_table = createTable(columnsArray,columnsModal);					
		
		            },  
		            error: function(XMLHttpRequest, textStatus, errorThrown) {  
		                alert("查询失败");  
		            }  
		    }); 
		}
		//创建表格
		function createTable(columnNames,columnModals){
					jQuery(grid_selector).jqGrid('GridUnload');
					var table1 = 	jQuery(grid_selector).jqGrid({				
							url: getRootPath()+'<%=CryptoHelper.encryptUrl(request,"/pubController/doCustomQuery")%>?jsguid='+sessionId+"&sql="+jQuery("#sql").val(),
							datatype: "json",
						    mtype: 'POST',  
							height: '100%',
							colNames:columnNames,
							colModel:columnModals, 
					        shrinkToFit:false,//不随列数量改变列宽度
							viewrecords : true,
							rownumbers:true,
							rowNum:15,
							rowList:[15,30],
							pager : pager_selector,
							sortname : 'id',//初始化的时候排序的字段
							sortorder : "desc",//排序方式,可选desc,asc
							altRows: true,
							//toppager: true,
							
							multiselect: true,
							//multikey: "ctrlKey",
					        multiboxonly: true,
					
							loadComplete : function() {
								var table = this;
								setTimeout(function(){														
									updateActionIcons(table);
									updatePagerIcons(table);
									enableTooltips(table);
								}, 0);
							},
						    loadError:function(xhr,status,error){
						        alert(error);
						    },
						    onPaging:function(pgButton){
						    	//alert(pgButton);
						    },
							caption: "自定义查询",
							autowidth: true
					
						});
								
					
						//navButtons
						jQuery(grid_selector).jqGrid('navGrid',pager_selector,
							{ 	//navbar options
								edit: false,
								editicon : 'icon-pencil blue',
								add: false,
								addicon : 'icon-plus-sign purple',
								del: false,
								delicon : 'icon-trash red',
								search: false,
								searchicon : 'icon-search orange',
								refresh: false,
								refreshicon : 'icon-refresh green',
								view: false,
								viewicon : 'icon-zoom-in grey',		
							}
						)
						
					
					
						return table1;
		}
		
				    
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
				'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
				'ui-icon-seek-next' : 'icon-angle-right bigger-140',
				'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
		
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}			
		</script>
	</body>
</html>
